<template>
  <button @click="toggle">显示隐藏图片</button>
  <img v-if="showImg" src="@/assets/logo.png" alt="" />
  <p>计数：{{ count }}</p>
  <button @click="add">+1</button>
  <button @click="changeObj">改变对象</button>
  <Children></Children>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import Children from './children-demo.vue'
const count = ref(0)
const showImg = ref(false)
const add = () => {
  count.value++
}
const toggle = () => {
  showImg.value = !showImg.value
}
const obj = reactive({
  name: 'xm',
  age: 17,
  sayHi() {
    console.log('hi')
  }
})
const changeObj = () => {
  obj.age++
  console.log(obj.age)
}
console.log(`output->count.value`, this)
</script>

<style></style>
